<template>
    <div>
        <div class="bindingView-title">绑定账户</div>
        <form rel="form">
            <div v-show="errmsg" class="login-errmsg">
                <img src="../../assets/img/loginerrimg@2x.png"/>
                <div >{{errmsg}}</div>
            </div>
            <div class="login-input">
                <img class="login-input-icon" src="../../assets/img/Rectangle10@2x.png"/>
                <input v-model="account" placeholder="账号" maxlength="50"/>
            </div>
            <div class="login-input">
                <img class="login-input-icon" src="../../assets/img/Rectangle11@2x.png"/>
                <input v-model="password" type="password"  placeholder="密码" maxlength="18" />
            </div>


            <div class="login-button" @click="gologin">绑 定</div>
        </form>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
    .bindingView-title{
        text-align: center;
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        padding: 31px 0px 34px 0px;
    }
    .loginview{
        width:100%;
        height:100%;
        position: absolute;
        background:rgba(242,249,255,1);
        .loginview-title{
            width: 100%;
            height: 45px;
            font-size:32px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(24,144,255,1);
            line-height:45px;
            text-align: center;
            margin-top: 32px;
            margin-bottom: 38px;
        }
        .loginview-logo{
            margin: 31px;
            img{
                width: 175px;
                height: 55px;
            }
        }
        .loginBox{
            width:380px;
            min-height:346px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px #D3D8DE solid;
            margin: 0 auto;
            .loginBox-title{
                display: flex;
                margin-top: 31px;
                margin-bottom: 28px;
                .loginBox-title-text{
                    width: 50%;
                    text-align: center;
                    font-size:16px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.65);
                    line-height:24px;
                    .loginBox-title-active{
                        color:rgba(24,144,255,1);
                    }
                    .loginBox-title-text-line{
                        width:56px;
                        height:2px;
                        background:rgba(24,144,255,1);
                        border-radius:1px;
                        margin:0 auto;
                        margin-top: 8px;
                    }
                }
            }

            .code-img{
                width:160px;
                height:160px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px #D9D9D9 solid;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                img{
                    width:142px;
                    height:142px;
                    align-self: center;
                }
            }
            .code-text{
                font-size:12px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.65);
                line-height:22px;
                text-align: center;
                margin-top: 8px;
            }
            .code-remind{
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(24,144,255,1);
                line-height:22px;
                text-align: center;
                margin: 20px 0px;
            }
            .login-input{
                width:332px;
                height:40px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px #CED3D9 solid;
                margin: 0 auto;
                display: flex;
                margin-bottom: 24px;
                input{
                    border: none;
                    font-size:16px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.65);
                    line-height:24px;
                    background-color: #ffffff;
                }
                input::-webkit-input-placeholder{
                    font-size:16px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.25);
                    line-height:24px;
                }
                input::-moz-placeholder{
                    font-size:16px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.25);
                    line-height:24px;
                }
                input:-ms-input-placeholder {
                    font-size:16px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.25);
                    line-height:24px;
                }

                .login-input-icon{
                    width: 16px;
                    height: 16px;
                    align-self: center;
                    margin:0px 12px;

                }
            }
            .login-radio{
                width:332px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                .login-input-radio{
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.65);
                    line-height:22px;
                    align-self: center;
                }
                .login-radio-psw{
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(24,144,255,1);
                    line-height:22px;
                    align-self: center;
                }
            }
            .login-button{
                width:332px;
                height:40px;
                background:rgba(24,144,255,1);
                border-radius:4px;
                font-size:16px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:40px;
                text-align: center;
                margin: 0 auto;
                margin-top: 24px;
                margin-bottom: 43px;
            }
            .login-errmsg{
                width:332px;
                height:40px;
                line-height: 40px;
                background:rgba(245,69,34,0.1);
                border-radius:4px;
                border:1px #F54522 solid;
                margin: 0 auto;
                font-size:13px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(245,69,34,1);
                margin-bottom: 12px;
                display: flex;
                img{
                    width: 16px;
                    height: 16px;
                    align-self: center;
                    margin: 0px 11px;
                }
                div{
                    align-self: center;
                }
            }
        }
        .loginview-bottom{
            width: 100%;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.45);
            text-align: center;
            position: absolute;
            bottom: 24px;
            .loginview-bottom-text{
                font-size:14px;
                line-height:22px;
                margin-bottom: 8px;
                span{
                    color:rgba(24,144,255,1);
                    margin-left: 5px;
                }
            }
            .loginview-bottom-text1{
                font-size:12px;
                line-height:20px;
            }
        }
    }

    </style>
<script>
    import  munes  from 'mock/mune';
    export default {
        name: "bindingView",
        data(){
            return{
                account:"",
                password:"",
                errmsg:'',
            }
        },
        watch: {
            account(val){
                if(val.length>0){
                    this.errmsg="";
                }
            },
            password(val){
                if(val.length>0){
                    this.errmsg="";
                }
            }
        },
        methods: {
            //表单验证
            valusernum(num) {
                var re = /^[A-Za-z0-9]+$/;
                return re.test(num);
            },
            gologin() {
                let _this = this;
                if (this.account == "") {
                    this.errmsg = '请输入用户名'
                    return
                }if (!this.valusernum(this.account)) {
                    this.errmsg = '账号只能由数字和字母组成'
                    return
                }if (this.password == "") {
                    this.errmsg = '请输入密码'
                    return
                }
                debugger

                let wxMpUser = window.localStorage.getItem("wxMpUser");
                let mpUser = JSON.parse(wxMpUser)
                if (!mpUser) {
                    this.errmsg = '请重新扫码登陆'
                    return
                }
                let params ={
                    username:this.account,
                    password:this.password,
                    openid:mpUser.openId,
                    unionId:mpUser.unionId,
                    nickName:mpUser.nickname,
                    distributorId:this.$route.query.distributorId,
                    enterpriseId:this.$route.query.enterpriseId
                };
                this.Api.auth.bindUser(params).then((data)=>{
                debugger
                if(data.returnCode == 10000){
                    _this.$router.push({ path: '/' });
                }
            });

            }
        }
    }
</script>

<style scoped>

</style>